<template>
  <div>
    <a-drawer
      width="900"
      :maskClosable="false"
      :visible="detailData.show"
      direction="rtl"
      @close="handleClose">
        <div slot="title">
          <span>任务详情</span>
        </div>
      <el-row v-loading="loading">
        <el-col :span="24">
          <el-form
            :model="parames"
            status-icon
            label-position="left"
            ref="parames"
            label-width="94px"
            class="detailForm"
          >
            <el-row style="padding: 30px 40px">
                  <el-col :span="24" style="background: #fafafa;padding:25px;">
                    <el-row v-if="parames.productLink">
                      <!-- 新办 -->
                      <el-col v-if="parames.productLink.name == 'NEW'" :span="24" style="text-align: center">
                        <p style="color:#409eff;font-size:14px;margin-top:15px;" v-if="parames.processEnum">{{parames.processEnum.desc}}</p>
                        <span v-if="parames.processEnum.name !== 'COMPLETE'">
                          <el-button :loading="loadingBtn" v-if="parames.processEnum.name !== 'SIGN'" @click="handleTask" style="margin-top:20px" size="small">{{parames.processEnum.desc}}</el-button>
                          <el-button :loading="loadingBtn" v-if="parames.processEnum.name == 'SIGN'" @click="handleTask2" style="margin-top:20px" size="small">{{parames.processEnum.desc}}</el-button>
                        </span>
                        <el-steps :active="parames.taskProcessRecordList.length" align-center style="margin-top: 15px">
                          <el-step :title="item.taskProcess.desc"  v-for="(item, index) in parames.taskProcessRecordList" :key="index">
                            <div slot="description">
                              <p>{{item.createBy}}</p>
                              <p>{{item.createDate | formatDate}}</p>
                            </div>
                          </el-step>
                        </el-steps>
                        <p style="margin-top:20px">新建-上传资料-签字-下照-客户取走</p>
                      </el-col>
                      <!-- 普通办理 -->
                      <el-col v-if="parames.productLink.name == 'STANDARD'" :span="24" style="text-align: center">
                        <p style="color:#409eff;font-size:14px;margin-top:15px;" v-if="parames.processEnum">{{parames.processEnum.desc}}</p>
                        <span v-if="parames.processEnum.name !== 'COMPLETE'">
                          <el-button :loading="loadingBtn" v-if="parames.processEnum.name !== 'MATERIAL'" @click="handleTask" style="margin-top:20px" size="small">{{parames.processEnum.desc}}</el-button>
                          <el-button :loading="loadingBtn" v-if="parames.processEnum.name == 'MATERIAL'" @click="handleTask2" style="margin-top:20px" size="small">{{parames.processEnum.desc}}</el-button>
                        </span>
                        <el-steps :active="parames.taskProcessRecordList.length" align-center style="margin-top: 15px">
                          <el-step :title="item.taskProcess.desc"  v-for="(item, index) in parames.taskProcessRecordList" :key="index">
                            <div slot="description">
                              {{item.createBy}}
                              {{item.createDate | formatDate}}
                            </div>
                          </el-step>
                        </el-steps>
                        <p style="margin-top:20px">新建-上传资料-下照-客户取走</p>
                      </el-col>
                      <!-- 标准 -->
                      <!-- <el-col  v-if="parames.productLink.name == 'STANDARD'" :span="24" style="text-align: center">
                        <p style="color:#409eff;font-size:14px;margin-top:15px;">新建</p>
                        <el-button @click="handleTask" style="margin-top:20px" size="small">执行任务</el-button>
                        <el-button @click="handleTask2" style="margin-top:20px" size="small">完成任务</el-button>
                        <p style="margin-top:20px">新建-完成任务</p>
                      </el-col> -->
                    </el-row>
                  </el-col>
                  <el-col :span="24">
                    <a-collapse :defaultActiveKey="activeNames" :bordered="false">
                      <a-collapse-panel class="marginB10" header="基本资料" key="1">
                        <el-row :gutter="10">
                          <el-col :span="12" style="margin-top:14px">
                            <el-form-item label="客户名称:">
                              <span>{{parames.customerName}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12" style="margin-top:14px">
                            <el-form-item label="产品名称:">
                              <p>{{parames.productName}}</p>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="联系人:">
                              <p>{{parames.contacts}}</p>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="是否赠送:">
                              <span>{{parames.gift?'是':'否'}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="实收:">
                              <p>{{parames.receiptedAmount}}</p>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="支出:">
                              <p>{{parames.expenditureAmount}}</p>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="产品环节类型:">
                              <p v-if="parames.productLink">{{parames.productLink.desc}}</p>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="当前环节:">
                              <span v-if="parames.processEnum">{{parames.processEnum.desc}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="创建时间:">
                              <span>{{parames.createDate | formatDate}}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </a-collapse-panel>
                      <a-collapse-panel class="marginB10" header="上传资料" key="2">
                        <el-row>
                          <el-table :data="parames.fileList" style="width: 100%">
                            <el-table-column prop="name" label="文件名"></el-table-column>
                            <el-table-column
                              prop="address"
                              label="上传时间">
                              <template slot-scope="scope">
                                <span>{{scope.row.createDate | formatDate2}}</span>
                              </template>
                            </el-table-column>
                            <el-table-column prop="address" label="操作" width="180">
                              <template slot-scope="scope">
                                <el-button size="mini" type="text" icon="el-icon-download" @click="handleDownFile(scope.row)"></el-button>
                                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelFile(scope.row)"></el-button>
                              </template>
                            </el-table-column>
                          </el-table>
                          <el-upload
                            class="upload-demo2"
                            :headers="myHeaders"
                            :action="fileAction"
                            :on-success="handleSucess"
                            :data="fileData"
                            style="width:100%"
                            :on-remove="handleRemove"
                            :file-list="file">
                            <el-button icon="el-icon-upload2" style="width:100%"  plain size="mini">上传资料</el-button>
                          </el-upload>
                        </el-row>
                      </a-collapse-panel>
                    </a-collapse>
                  </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </a-drawer>
  </div>
</template>

<script>

export default {
  props: ["detailData"],
  data() {
    return {
      loading: false,
      activeNames: ['1','2'],
      parames: {},
      myHeaders: {authorization: ''},
      fileList: [],
      fileData: {
        contractProductId: ''
      },
      loadingBtn: false,
      file: [],
      fileAction: this.$api.postTaskDisposableMaterialUpload, //附件上传地址
    }
  },
  methods: {
    handleClose() { //关闭弹窗
      this.detailData.show = false;
    },
    handleDownFile (row) { //附件下载
      window.location.href = this.$api.postTaskDisposableMaterialDownload+'?name=' + row.name + '&url=' + row.url
    },
    handleDelFile (row) { //删除资料
    this.$post(this.$api.postTaskDisposableMaterialDel,{
        disposableFileId: row.id
      }).then(response => {
        if (response.data.succeed) {
          this.$message({message: '删除成功',type: 'success'})
          setTimeout(() => {
            this.render()
          }, 200);
        }
      })
    },
    handleSucess (response,fileList) { //上传附件成功返回url
      this.$message({
          message: '上传成功',
          type: 'success'
      });
      this.render()
      this.file = []
    },
    handleRemove (file) { //删除附件更新
      this.fileList.forEach((el,index)=>{
        if (el == file.response.data.url) {
          this.fileList.splice(index, 1)
        }
      })
    },
    handleTask () { //执行任务
      this.loadingBtn = true
      this.$post(this.$api.postTaskDisposableProcess,{
        contractProductId: this.detailData.id
      }).then(response => {
        if (response.data.succeed) {
          this.$message({message: '执行成功',type: 'success'})
          this.$emit('checkRender')
          this.render()
          setTimeout(() => {
            this.loadingBtn = false
          }, 200);
        }
      })
    },
    handleTask2 () { //完成任务
      this.loadingBtn = true
      this.$post(this.$api.postTaskDisposableComplete,{
        contractProductId: this.detailData.id,
      }).then(response => {
        if (response.data.succeed) {
          this.$message({message: '执行成功',type: 'success'})
          this.$emit('checkRender')
          this.render()
          setTimeout(() => {
            this.loadingBtn = false
          }, 200);
        }
      })
    },
    render () {
      this.$post(this.$api.postTaskDisposableFind,{
        contractProductId: this.detailData.id
      }).then(response => {
        if (response.data.succeed) {
          this.parames = response.data.data
        }
      })  
    }
  },
  components: {
  },
  computed: { //计算属性
    changeDialog () {
      return this.detailData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
          this.myHeaders.authorization = this.$utils.getLocalStorage('usertoken')
          this.fileData.contractProductId = this.detailData.data.contractProductId
          this.render()
        } else {
          this.activeNames = ['1','2']
        }
      }
    },
    deep: true
  }
};
</script>

<style>
.kaipiao-box{
  width: 100%;
  height: 80px;
  padding: 20px 0 20px 60px;
  position: relative;
  background: #d8bf99;
  color: #fff;
  font-size: 14px
}
.kaipiao-box-left{
  display: block;
  position: absolute;
  top: 30px;
  left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}
.kaipiao-box-right{
  display: block;
  position: absolute;
  top: 30px;
  right: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}
.kaipiao-box-bottom{
  border-bottom: rgba(216, 191, 153, 1) solid 2px;
  margin-top: 2px;
}
.kaipiao-xu:last-child{
  border-right: none;
}
.kaipiao-xu{
  border-right: #fff dashed 1px;
}
.kaipiao-xu .jine-top{
  margin-top: 5px;
  font-size: 16px;
}
.upload-demo2 {
  margin-top:20px;
}
.upload-demo2 .el-upload {
  width: 100%
}
</style>
